<template>
  <div
    ref="dialogWrap"
    class="dialog_wrap"
  >
    <div
      ref="dialogBox"
      class="dialog_box"
    >
      <el-dialog
        v-if="dialogVisable"
        v-model="dialogVisable"
        :title="title"
        :class="`${customClass} ${visualThemeClassName} color-theme-editor-dialog ${xvueNameSpace}`"
        :close-on-click-modal="false"
        @close="cancel"
      >
        <div class="color-theme-editor">
          <!-- 单色 single -->
          <el-table
            v-if="theme.type === 'single'"
            class="config-panel-table"
            :data="theme.colors"
            size="default"
          >
            <el-table-column
              :render-header="renderTableHeader"
              type="index"
              :label="$demoi18n('word.serialNumber')"
              :width="50"
              align="center"
            ></el-table-column>
            <el-table-column
              :render-header="renderTableHeader"
              :label="$demoi18n('word.choose')"
              :width="250"
              align="center"
            >
              <template #default="scope">
                <div class="color">
                  <span>{{ scope.row[0] }}</span>
                  <el-color-picker
                    v-model="scope.row[0]"
                    :popper-class="'vis-color-picker-panel-' + xvueTheme"
                    size="default"
                    color-format="hex"
                    append-to=".color-theme-editor-dialog"
                  ></el-color-picker>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :render-header="renderTableHeader"
              :label="$demoi18n('word.operation')"
              align="center"
            >
              <template #default="scope">
                <el-button
                  :link="true"
                  type="primary"
                  icon="Delete"
                  size="default"
                  @click="delColor(scope.row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 渐变色 gradient -->
          <el-table
            v-if="theme.type === 'gradient'"
            class="config-panel-table"
            :data="theme.colors"
            size="default"
            :max-height="540"
          >
            <el-table-column
              :render-header="renderTableHeader"
              type="index"
              :label="$demoi18n('word.serialNumber')"
              :width="50"
              align="center"
            ></el-table-column>
            <el-table-column
              :render-header="renderTableHeader"
              :label="$demoi18n('panel.colorEditor.startColor')"
              :width="60"
              align="center"
            >
              <template #default="scope">
                <div class="color">
                  <el-color-picker
                    v-model="scope.row[0]"
                    :popper-class="'vis-color-picker-panel-' + xvueTheme"
                    size="default"
                    color-format="hex"
                    append-to=".color-theme-editor-dialog"
                  ></el-color-picker>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :render-header="renderTableHeader"
              :label="$demoi18n('panel.colorEditor.endColor')"
              :width="60"
              align="center"
            >
              <template #default="scope">
                <div class="color">
                  <el-color-picker
                    v-model="scope.row[1]"
                    :popper-class="'vis-color-picker-panel-' + xvueTheme"
                    size="default"
                    color-format="hex"
                    append-to=".color-theme-editor-dialog"
                  ></el-color-picker>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :render-header="renderTableHeader"
              :label="$demoi18n('panel.colorEditor.preview')"
              align="center"
            >
              <template #default="scope">
                <div
                  class="gradient"
                  :style="getGradientStyle(scope.row)"
                ></div>
              </template>
            </el-table-column>
            <el-table-column
              :render-header="renderTableHeader"
              :width="60"
              :label="$demoi18n('word.operation')"
              align="center"
            >
              <template #default="scope">
                <el-button
                  :link="true"
                  type="primary"
                  icon="Delete"
                  size="default"
                  @click="delColor(scope.row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="add_color">
            <el-button
              class="btn-sure"
              type="primary"
              icon="CirclePlus"
              size="small"
              @click="addColor"
            >
              {{ $demoi18n('btn.add') }}
            </el-button>
          </div>
        </div>
        <template #footer>
          <span>
            <el-button
              class="button-cancel"
              @click="cancel"
            >
              {{ $demoi18n('btn.cancel') }}
            </el-button>
            <el-button
              class="btn-sure"
              type="primary"
              :disabled="theme.colors.length === 0"
              @click="save"
            >
              {{ $demoi18n('btn.confirm') }}
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang='jsx'>
import { dropArrItem } from '@/utils/util.js';

function getEmptyThemeConf() {
  return {
    componentStyle: '', // light | dark
    type: '', // single | gradient,
    key: '', // t20200907173055021

    /*
     * 单色：['#fdb61a', '#00acff', '#5ecc49']
     * 渐变色： [ ['#0de396', '#5ecc49'], ['#ff7800', '#d46325'], ['#fff68f', '#efe147'] ]
     */
    colors: [],
  };
}

export default {
  components: {},
  props: {
    visible: Boolean,
    themeConf: {
      type: Object,
      default: () => getEmptyThemeConf(),
    },
  },
  emits: ['save', 'cancel'],
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      xvueTheme: window._adoPremise.uc.theme, // 'dark',
      customClass: `color_theme_dialog color_theme_dialog-${window._adoPremise.uc.theme || 'light'}`,
      dialogVisable: this.visible,
      theme: getEmptyThemeConf(),
    };
  },
  computed: {
    title() {
      const typeText =
        this.themeConf.type === 'single' ?
          this.$demoi18n('panel.colorEditor.monochrome') :
          this.$demoi18n('panel.colorEditor.gradient');
      return `${this.$demoi18n('panel.colorEditor.customColorPackage')} -- ${typeText}`;
    },
  },
  watch: {
    themeConf() {
      this.initTheme();
    },
    visible(val) {
      this.dialogVisable = val;
    },
    dialogVisable(val) {
      // 需要将弹窗放在body下，不然会被其他组件挡住
      if (val) {
        this.initTheme();
        document.body.appendChild(this.$refs.dialogBox);
      } else {
        this.$refs.dialogWrap.appendChild(this.$refs.dialogBox);
      }
    },
  },
  mounted() {
    this.initTheme();
  },
  methods: {
    initTheme() {
      if (this.$attrs?.form?.colorComponents) {
        return;
      }
      const _themeConf = JSON.parse(JSON.stringify(this.themeConf));
      if (_themeConf.type === 'single') {
        // 需要转换成数组，不然 v-model="scope.row" 不起作用
        _themeConf.colors = _themeConf.colors.map(n => [n]);
      }
      _themeConf.colors.forEach(n => {
        for (let i = 0; i < n.length; i++) {
          n[i] = n[i].toUpperCase(n[i]);
        }
      });
      this.theme = _themeConf;
    },
    delColor(color) {
      this.theme.colors = dropArrItem(this.theme.colors, color);
    },
    addColor() {
      const color = this.theme.type === 'single' ? ['#DDDDDD'] : ['#DDDDDD', '#DDDDDD'];
      this.theme.colors.push(color);
    },
    getGradientStyle(color) {
      return {
        backgroundImage: `linear-gradient(to right, ${color[0]}, ${color[1]})`,
      };
    },
    cancel() {
      this.$emit('cancel');
    },
    save() {
      if (!this.theme.colors.length) {
        return;
      }

      const _themeConf = JSON.parse(JSON.stringify(this.theme));
      if (this.theme.type === 'single') {
        _themeConf.colors = _themeConf.colors.map(n => n[0]);
      }
      this.$emit('save', _themeConf);
    },
    renderTableHeader({ column }) {
      return (<el-tooltip placement="top" content={column.label} effect={this.xvueTheme}>
        <span>{column.label}</span>
      </el-tooltip>
      );
    },
  },
};
</script>
<style lang="less">
@import '../../../common/color-picker-panel.less';
</style>
<style lang="less">
.color_theme_dialog {
  width: 450px;
}
</style>
<style lang="less" scoped>
.color-theme-editor {
  .row {
    display: flex;
    align-items: center;
    .label {
      width: 80px;
      text-align: left;
    }
    .cont {
      display: flex;
    }
  }
  .el-table {
    margin-top: 20px;
    width: 100%;
    border: 1px solid #ddd;
    .color {
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        margin-right: 5px;
        width: 70px;
      }
    }
    .gradient {
      width: 100%;
      height: 26px;
    }
  }
  .add_color {
    display: flex;
    margin-top: 20px;
  }
  .bottom_btns {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    .save {
      margin-left: 40px;
    }
  }
}
</style>

<style lang="less">
@font_color_dark: #98cae6;
@font_color_active_dark: #00f0ff;
@background_color_dark: #071f30;
@bgColor_dark: #000c17;
@borderColor_dark: #116584;
@textColor_dark: #ffffff;
.color_theme_dialog-dark {
  :deep(.el-dialog__header) {
    background: #183c5a;
    .el-dialog__title {
      font-size: 16px;
      color: #fff;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }
  }

  :deep(.el-dialog__body) {
    color: #98cae6;
    background: #0e2b40;

    .color-theme-editor {
      background: #0e2b40;
      // 表格
      .config-panel-table {
        color: @font_color_dark;
        background-color: @background_color_dark;
        border-color: #116584;
        &::before {
          background-color: @background_color_dark;
        }

        .cell {
          padding: 0 3px !important;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        td,
        th {
          padding: 5px 0 !important;
        }

        .el-table__header {
          th {
            background-color: #122b40 !important;
            border-color: #122b40;
            color: @font_color_dark;
          }
        }

        .el-table__body {
          tr {
            td {
              background-color: @background_color_dark;
              border-color: @background_color_dark;

              .el-color-picker__trigger {
                border-color: #116584;
                .el-color-picker__color {
                  border-color: #116584;
                }
                .el-color-picker__icon {
                  color: #116584;
                }
              }
              .icon-library-open {
                background-color: unset;
                border-color: #0eb4c2;
              }
            }
          }
        }

        .el-table__empty-block {
          background-color: #093758;

          .el-table__empty-text {
            color: @font_color_active_dark;
          }
        }
      }
      .el-form-item__label {
        color: @font_color_dark;
      }
      .el-form-item__content {
        .el-input {
          .el-input__inner {
            border-color: @borderColor_dark;
            color: @textColor_dark;
            background-color: @bgColor_dark;
          }

          .el-input__icon {
            color: @borderColor_dark;
          }
        }

        .el-radio-group {
          .el-radio {
            color: @textColor_dark;

            .el-radio__input {
              .el-radio__inner {
                border-color: @font_color_active_dark;
                background-color: unset;
              }
            }

            .is-checked {
              .el-radio__inner {
                &::after {
                  background-color: @font_color_active_dark;
                }
              }
            }

            .el-radio__label {
              color: #fff;
            }
          }
        }
      }
    }
  }

  :deep(.el-dialog__footer) {
    color: #606266;
    background: #0e2b40;
  }

  // 默认按钮样式类
  .btn-sure {
    background-color: #0eb4c2;
    border-color: #0eb4c2;
    color: #fff;

    .el-icon-circle-plus {
      color: #fff;
    }
  }

  .button-cancel {
    background-color: #064559;
    border-color: #064559;
    color: #fff;

    .el-icon-circle-plus {
      color: #fff;
    }
  }
}
</style>
